<template>
	<tm-app color="#efefef">

		<view class="flex flex-end pl-30 FormM1">
			<navbar-module title="发起治疗" :transprent="true" />
		</view>

		<view
			style="border-radius: 20rpx;margin-top:-100rpx;z-index: 3;max-height:1100rpx;overflow: auto;padding: 10rpx;"
			class="mx-32">
			<tm-form @submit="confirm" ref="from" v-model="copeForm" layout="vertical" :label-width="190"
				:margin="[0,0]">
				<tm-form-item required label="耳标编号" field="erb"
					:rules="[{required:true,message:'请填写耳标编号'},{required:true,message:'耳标编号错误',validator:()=>rightErId}]">
					<tm-input v-model.lazy="copeForm.erb" @confirm="getInfo()" @blur="getInfo()">
						<template v-slot:right>
							<tm-icon name="tmicon-scan" @click="takePhoto()"/>
						</template>
					</tm-input>
				</tm-form-item>
				<tm-form-item v-if="showPigInfo">
					<tm-cell bottomBorder :margin="[0,0]" title="猪仔名称">
						<template v-slot:right>
							<tm-text>{{itemData?.name}}</tm-text>
						</template>
					</tm-cell>
					<tm-cell bottomBorder :margin="[0,0]" title="所在猪圈">
						<template v-slot:right>
							<tm-text>{{itemData?.pigsty?.name}}</tm-text>
						</template>
					</tm-cell>
					<tm-cell bottomBorder :margin="[0,0]" title="猪仔日龄">
						<template v-slot:right>
							<tm-text>{{itemData?.pigLevel.day}}</tm-text>
						</template>
					</tm-cell>
					<tm-cell bottomBorder :margin="[0,0]" title="品种">
						<template v-slot:right>
							<tm-text>{{itemData?.breed?.name}}</tm-text>
						</template>
					</tm-cell>
				</tm-form-item>


				<tm-form-item required label="治疗类型" field="type" :rules="[{ required: true, message: '请选择治疗类型' }]">
					<view @click="showPicker = true" class="flex flex-row flex-row-center-between">
						<tm-text :userInteractionEnabled="false" :label="copeForm.type || '请选择治疗类型'"/>
						<tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"/>
					</view>
				</tm-form-item>
				<tm-form-item>
					<tm-button :margin="[20]" block :linear-color="['#FADC19', '#23C343']" :round="16" linear="right"
						:shadow="0" label="提交治疗" form-type="submit" :fontSize="34"/>

				</tm-form-item>


			</tm-form>
		</view>



		<tm-picker :columns="pickerlist" mapKey="label" v-model:model-str="copeForm.type" v-model:show="showPicker"
			v-model="copeForm.index" color="#23C343"/>


		<tm-message ref="msg" :lines="2"/>
		<tm-notification placement="top" ref="notif" :offset="[32,90]"/>
	</tm-app>
</template>

<script setup lang='ts'>
	import {
		reactive,
		ref,
		nextTick
	} from "vue";
	import {
		submitTreatment,
		getPig,
		getTreatKind
	} from '../../index/resource/http'
	import tmMessage from '@/tmui/components/tm-message/tm-message.vue'
	import tmNotification from '@/tmui/components/tm-notification/tm-notification.vue'

	const msg = ref < InstanceType < typeof tmMessage > | null > (null)
	const notif = ref < InstanceType < typeof tmNotification > | null > (null)

	const FormData = reactive({
		content: null,
		pigId: null,

	})
	const copeForm = reactive({
		type: null,
		index: null,
		erb: null
	})
	const itemData = ref(null)
	const showPigInfo = ref(false)
	const showPicker = ref(false)
	const pickerlist = ref([])

	const rightErId = ref(true)

	const takePhoto = () => {
		uni.scanCode({
			success: async function(res) {
				const {
					data
				} = await getPig(res.result)
				itemData.value = data
				showPigInfo.value = true
				copeForm.erb = res.result
			}
		});
	}
	const getInfo = async () => {
		const {data} = await getPig(copeForm.erb)
		if (data) {
			itemData.value = data
			showPigInfo.value = true
			rightErId.value = true
		} else {
			rightErId.value = false
		}

	}

	const getData = async () => {
		const {
			data
		} = await getTreatKind()
		pickerlist.value = data
	}
	getData()

	const confirm = async () => {
		//提交表单接口
		FormData.content = pickerlist.value[copeForm.index].value
		FormData.pigId = itemData.value.id
		const res = await submitTreatment(FormData)
		if (res.code == 0) {
			msg.value.show({
				model: 'success'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1300)
		} else {
			nextTick(() => {
				notif.value?.show({
					label: res.message,
					color: '#FF837F'
				})
			})
		}
	}

	const test = () => {
		showPicker.value = true
	}
</script>

<style lang="less" scoped>

</style>